<template>
  <header>
    <div class="info">
      <h1 class="title">相册详情</h1>
      <p style="color: #a8abb2">
        <span>
          <i class="iconfont icon-fenlei-copy"></i>{{ PhotoInfo.name }}</span
        >
        <span>
          <i class="iconfont icon-yonghu"></i>
          创建人: {{ PhotoInfo.username }}
          <i class="iconfont icon-rili"></i>
          创建于: {{ dayjs(PhotoInfo.createDate).format("YYYY-MM-DD") }}
        </span>
      </p>
    </div>
    <wave></wave>
  </header>
  <div class="container">
    <div class="tip">
      <el-icon>
        <Warning />
      </el-icon>
      点击图片即可预览
    </div>
    <List :List="PhotoList" :cardHeight="220">
      <template v-slot:content="{ item, index }">
        <el-image
          :initial-index="index"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="PreviewList"
          :src="item.image"
          :zoom-rate="1.2"
          lazy
          style="width: 100%; height: 180px"
        />
        <p class="item-info">
          <span class="summary">{{ item.summary }}</span>
          <span
            >上传日期：{{ dayjs(item.createDate).format("YYYY-MM-DD") }}</span
          >
        </p>
      </template>
    </List>
  </div>
</template>
<script setup>
import { ref } from "vue";
import dayjs from "dayjs";
import { useRoute } from "vue-router";
import { getPhotoDetail } from "@/api/photo.js";
import List from "@/components/List/index.vue";
import { Warning } from "@element-plus/icons-vue";
import wave from "@/components/wave/index.vue";

const route = useRoute();
const { id: PhotoId } = route.params;
const PhotoList = ref([]);
const PhotoInfo = ref({});
const PreviewList = ref([]);
const getDetail = async () => {
  let res = await getPhotoDetail({ id: PhotoId });
  if (res && res.status === 200) {
    PhotoList.value = res.data;
    PreviewList.value = res.data.map((item, index) => {
      return item.image;
    });
    PhotoInfo.value = res.info;
  }
};
getDetail();
</script>

<style lang="scss" scoped>
header {
  position: relative;
  width: 100%;
  height: 380px;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("https://ik.imagekit.io/mpjl8xreo/photodetail.png");
  .info {
    width: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #ffff;
      font-weight: bold;
      margin: 15px 0;
    }

    p {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;

      span {
        display: flex;
        align-items: center;
        gap: 20px;
      }
    }
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #0009;
  }
}

.item-image {
  width: 100%;
}

.item-info {
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .summary {
    max-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

:deep(.el-card__body) {
  padding: 0 !important;
}

@media screen and (max-width: 960px) {
  .info {
    width: 100% !important;
  }
}
</style>
